<!DOCTYPE html>
<html lang="en">
<!-- 

/*
  《Vue.js 版本飞机大战新冠病毒》
  - - - - - - - - - - - - - - - - - - 
  作者：阿峰
  网址：http://www.fongzz.com/vuejs-aircraft-fight-virus
  - - - - - - - - - - - - - - - - - - 
  2020年4月
*/ 


 -->

<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"
  />
  <title>🛩️飞机大战新冠病毒</title>
  <link
    href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css"
    rel="stylesheet"
  >
  <link
    href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css"
    rel="stylesheet"
  >
  <!-- Custom styles for this template -->
  <link
    href="04.css"
    rel="stylesheet"
  />
</head>

<body>
  <div
    class="container-fluid"
    id="app"
  >
    <div class="row">
      <!-- 天空 -->
      <div
        class="col-md-12"
        id="sky"
        @mousemove="touchmove"
        @touchmove.prevent="touchmove"
        :style="{'background-position': ' 0px ' + f.bullets_amount + 'px'}"
      >
        <!-- 战斗机 Fighter aircraft -->
        <span
          id="f"
          :style="{
                    left: f.x + 'px', 
                    top: f.y + 'px',
                    transform: 'rotate(' + '-45deg)'
                  }"
        >🛩</span>
        <button
          class="btn btn-info mt-2"
          style="opacity: 0.9;"
        >😷 子弹数量：{{ f.bullets_amount }} <br>😷 阻击数量：000 <br>😷 病毒总数：{{ virus.amount }} <br>😷 击落率 %：000 </button>
        <!-- 口罩脸（子弹） -->
        <span v-for="(b, i) of f.bullets">
          <span
            class="f_bullet"
            :style="{left: b.x + 'px', top: b.y + 'px'}"
          >😷</span>
        </span>
        <!-- 白云 -->
        <span v-for="(c, i) of clouds">
          <img
            class="cloud"
            :style="{left: c.x + 'px', top: c.y + 'px'}"
            src="../assets/img/cloud_2.png"
          >
        </span>
        <!-- 病毒 -->
        <span v-for="(e, i) of virus.arr">
          <img
            class="virus"
            :style="{left: e.x + 'px', top: e.y + 'px'}"
            src="../assets/img/xin_guan_bing_du_64.png"
          >
        </span>
      </div>
    </div>
  </div>
  <footer class="text-muted">
    <div class="container py-4">
      <p class="float-right">
        <a href="#">⬆</a>
      </p>
      <p>祝您玩的愉快!</p>
      <p>www.fongzz.com</p>
    </div>
  </footer>
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="04.js"></script>
</body>

</html>